@layout("/common/_container.html"){
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal">

            <div class="row">
                <div class="col-sm-12 b-r">
                    <div class="pageFormContent" layoutH="56">
                        <input type="hidden" id="orgId" value="${orgId}">
                        <input type="hidden" id="peopleId" value="${peopleId}">
                        <div class="unit">
                            <label>学段：</label>
                            <select id="jz_phaseId_add" class="required" onchange="phaseRelationParentAdd(this);">
                                <option value="">请选择...</option>
                                @for(phaseMeta in phaseList){
                                <option value="${phaseMeta.id}">${phaseMeta.name}</option>
                                @}
                            </select>
                        </div>
                        <div class="unit">
                            <label>年级：</label>
                            <select id="jz_gradeId_add" class="required" onchange="gradeRelationParentAdd(this);">
                                <option value="">请选择...</option>
                            </select>
                        </div>
                        <div class="unit">
                            <label>班级：</label>
                            <select id="jz_classId_add" class="required" onchange="classRelationParentAdd(this);">
                                <option value="">请选择...</option>
                            </select>
                        </div>
                        <div class="unit">
                            <label>子女姓名：</label>
                            <input type="hidden" name="studentId" id="stu_id_add"/>
                            <input type="hidden" id="stu_classId"/>
                            <select id ="studentId" name="studentId" class="selectpicker "  data-style="btn-primary" data-live-search="true" onclick="initStulist()">
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row btn-group-m-t">
                <div class="col-sm-10" style="text-align: center">
                    <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="PtPeopleStudentInfoDlg.addSubmit()"/>
                    <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="PtPeopleStudentInfoDlg.close()"/>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="${ctxPath}/static/modular/system/ptPeopleStudent/ptPeopleStudent_info.js"></script>
<style>

    .pageFormContent div.unit {
        display: block;
        margin: 0;
        padding: 5px 0;
        position: relative;
        clear: both;
    }
    .pageFormContent label{
        float: left;
        width: 120px;
        padding: 0 5px;
        line-height: 21px;
    }
    .pageFormContent select{
        float: left;
        width:203px; height: 33px
    }

</style>
<script>
    $(function() {
        $(".selectpicker").selectpicker({
            noneSelectedText: '请点击显示', //默认显示内容 //
            width:204
        });
    })
    //绑定bootstrap-select事件
    $(".selectpicker").on('shown.bs.select',function(e){
        initStulist();
    });
    function initStulist() {
        $.ajax({
            type: "post",
            url:Feng.ctxPath+'/ptPeople/suggestStudentList',
            data:{'orgId':$("#orgId").val(),"classId":$("#jz_classId_add").val()},
            async:false,
            dataType: "json",
            success: function(data){
                var studentList = data;
                if (studentList.length>0) {
                    var studentNameStr ='<option value=""></option>';
                    for (var i = 0; i < studentList.length; i++) {
                        studentNameStr += "<option value='" +studentList[i].userId + "' ";
                        studentNameStr += ">" + studentList[i].userName + "</option>";
                    }
                    $("#studentId").html(studentNameStr);
                    //必须加，刷新select
                    $("#studentId").selectpicker('refresh');
                }
            }
        });

    }
    function phaseRelationParentAdd(obj){
        var phaseId = $(obj).val();
        if(phaseId){
            $.ajax({
                type: "get",
                async: false,
                url: Feng.ctxPath+"/ptPeople/getGradeByPhaseId",
                data: {'orgId': $("#orgId").val(),'phaseId':phaseId},
                dataType: "json",
                cache: false,
                success: function (data) {
                    var gradeOptions = "<option value=''>请选择...</option>";
                    if(data){
                        $.each(data,function(n,grade){
                            gradeOptions += "<option value='"+grade.id+"' ";
                            gradeOptions += ">"+grade.name+"</option>";
                        });
                    }
                    $("#jz_gradeId_add").html(gradeOptions);
                },
            });
        }else{
            $("#jz_gradeId_add").html("<option value=''>请选择...</option>");
            $("#jz_classId_add").html("<option value=''>请选择...</option>");
            $("#stu_name_add").val("");
        }
    }
    function gradeRelationParentAdd(){
        var phaseId = $("#jz_phaseId_add").val();
        var gradeId = $("#jz_gradeId_add").val();
        if(phaseId && gradeId){
            $.ajax({
                type: "get",
                async: false,
                url: Feng.ctxPath+"/ptPeople/getClassByGradeId",
                data: {'orgId':$("#orgId").val(),'phaseId':phaseId,'gradeId':gradeId},
                dataType: "json",
                cache: false,
                success: function (data) {
                    var classOptions = "<option value=''>请选择...</option>";
                    if(data){
                        $.each(data,function(n,classInfo){
                            classOptions += "<option value='"+classInfo.id+"' ";
                            classOptions += ">"+classInfo.name+"</option>";
                        });
                    }
                    $("#jz_classId_add").html(classOptions);
                },
            });
        }else{
            $("#jz_classId_add").html("<option value=''>请选择...</option>");
            $("#stu_name_add").val("");
        }
    }
    function classRelationParentAdd(obj){
        $("#stu_name_add").val("");
        $("#stu_classId").val($(obj).val());
    }
</script>
@}
